<template>
  <row class="view-users">
    <left v-loading="loading" v-empty="emptyUsers">
        <search class="search-box"></search>
        <user-list :data="users" @select="handleSelect"/>
    </left>
    <center>
      <router-view v-slot="{ Component }">
        <transition appear name="slide">
          <component :is="Component" :data="SelectUser"/>
        </transition>
      </router-view>
    </center>
  </row>
</template>

<script>
import { defineComponent } from 'vue'
import Search from '@/components/wrapSearch'
import UserList from '@/components/userList/userList.vue'
import { getUserList } from '@/service'
import storage from 'good-storage'
import { CURRENT_USERINFO_KEY } from '@/assets/js/constant'
export default defineComponent({
  name: 'Users',
  components: {
    UserList,
    Search
  },
  data() {
    return {
      users: [],
      SelectUser: null
    }
  },
  computed: {
    loading() {
      return !this.users.length
    },
    emptyUsers() {
      return !this.users.length
    }
  },
  async created() {
    const users = await getUserList()
    this.users = users
    if (!this.SelectUser) {
      const cached = storage.session.get(CURRENT_USERINFO_KEY)
      if (cached) {
        this.handleSelect(cached)
      }
    }
  },
  methods: {
    handleSelect(user) {
      this.SelectUser = user
      this.cacheUser(user)
      this.$router.push({
        path: `/users/${user.userId}`
      })
    },
    cacheUser(user) {
      storage.session.set(CURRENT_USERINFO_KEY, user)
    }
  }
})
</script>

<style lang="scss" scoped>
  .layout-center {
    background-color: $color-text-d;
  }
  .layout-left,
  .layout-left-scroll {
    height: 100%;
    overflow: hidden;
  }
  .search-box {
    margin: 16px 8px;
  }
</style>
